<template>
    <view
        class="good-item"
        @click="jump(data)"
        :style="{
            padding: d.padding,
            backgroundColor: d.backgroundColor,
            borderRadius: d.borderRadius
        }"
    >
        <view class="image-wrap">
            <img-cache :src="`${global.productImageUrl}${data.picId}/1`" width="100%" mode="widthFix" absolute :borderRadius="d.borderRadius" class="item-img" :key="$u.guid(5)"></img-cache>
            <u-image src="/static/icon/10010.png" width="52" height="35" v-if="data.videoNum > 0" class="video-tag"></u-image>
        </view>
        <view class="text-area">
            <!-- 商品标题 -->
            <view class="good-name" :style="d.titleStyle">{{ data.releaseName }}</view>
            <!-- 价格 -->
            <view class="price-line">
                <view class="good-price" :style="d.priceStyle">
                    <view class="o-font-bold" v-if="d.showPrice"> ￥{{ Number(data.userPrice).toFixed(2) }}</view>
                </view>
            </view>
            <!-- 建议零售价 -->
            <view class="Suggested-retail-price" v-if="d.showSuggest">
                <text class="line-through">建议零售价:￥{{ data.suggestedPrice || 0 }}</text>
            </view>
            <!-- 限时特惠 -->
            <view class="activity-label" :style="d.labelStyle" v-if="d.showLabel && d.activitiesLabel">
                {{ data.activitiesLabel }}
            </view>
            <!-- 星级 -->
            <view class="stars-level" v-if="d.showStar">
                <stars :count="data.starsLevel" :color="d.starColor"></stars>
            </view>
            <!-- 已售 -->
            <view class="good-sales">
                <view v-if="d.showSales">已售{{ $u.$tools.numberFormat(data.saleNum) }}件</view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import stars from './stars.vue'
import global from '@/config/index'
import { computed, reactive } from 'vue'
interface Props {
    data: any
    config: any
}
const props = defineProps<Props>()

function jump(item: any) {
    uni.$u.$MRouter.details.to({ id: item.id })
}

const d = reactive<any>({})

for (let key in props.config) {
    d[key] = props.config[key]
}

const $u = computed(() => {
    return uni.$u
})

</script>

<style lang="scss" scoped>
@import './common.scss';
</style>
